{include file="/common/vue3" /}
<div id="app">
    <el-calendar ref="calendar" v-model="value">
      <template #header="{ date }">
        <el-button-group>
          <!--
          <el-button size="small" @click="selectDate('prev-year')">
            上一年
          </el-button>
          -->
          <el-button size="small" @click="selectDate('prev-month')">
            上个月
          </el-button>
          <el-button size="small" @click="selectDate('today')"
            >今天</el-button
          >
          <el-button size="small" @click="selectDate('next-month')">
            下个月
          </el-button>
          <!--
          <el-button size="small" @click="selectDate('next-year')">
            下一年
          </el-button>
          -->
        </el-button-group>
        <span>{{ date }}</span>
        <el-button-group>
          <el-button size="small" type="primary" style="padding-left:5px;">
            批量岗位设置
          </el-button>
          <el-button size="small" type="primary" style="padding-left:5px;" @click="showDay">
            设置岗位日计划
          </el-button>
        </el-button-group>
      </template>
      <template #date-cell="{ data }">
        <div class="calendar-day"  @click="handleClick(data)">
          <p>
            {{ data.day.split("-").slice(1).join("-") }}
            {{ data.isSelected ? "✔️" : "" }}
          </p>
          <div v-for="d in jobData">
            <div v-if="data.day==d.date" :style="
						d.type == 'important'
							? 'color: #f00'
							: ''
					  ">
              <!--
              <p>
                {{ d.workShift }}
                {{ d.workTime }}
              </p>
              -->
              <p class="contentd">{{ d.content }}</p>
            </div>
          </div>
        </div>
      </template>
    </el-calendar>
    <el-dialog v-model="showPill" :title="dialogTitle" width="500">
      <el-row :class="index % 2 === 0 ? `lightgreen-box`: `orange-box`" v-for="(item,index) in pillData" :key="index" v-if="pillData.length>0">
        <el-col :sm="6" >{{ item.start }}</el-col>
        <el-col :sm="6" >{{ item.end }}</el-col>
        <el-col :sm="6" >
          {{item.price}} &nbsp;元
        </el-col>
        <el-col :sm="6" >
          <div v-if="item.is_open==='1'"><font color="blue">开放</font></div>
          <div v-else><font color="gray">占用</font></div>
        </el-col>
      </el-row>
      <el-row v-else>
        <el-col>当天教室关闭</el-col>
      </el-row>
    </el-dialog>

    <el-dialog v-model="showDialogDay" title="设置岗位日计划" width="500">
      <el-form :model="formDay" label-width="auto" style="max-width: 500px">
        <el-form-item label="开始日期">
          <el-date-picker
            v-model="formDay.startDate"
            type="date"
            placeholder="请选择日期"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker
            v-model="formDay.endDate"
            type="date"
            placeholder="请选择日期"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="人次">
          <el-input-number v-model="formDay.planTotal" style="width: 140px"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitDay">保存</el-button>
          <el-button @click="onCancelDay">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
</div>
<input type="hidden" id="jobId" value="{$row.job_id}" />
<style lang="scss" scoped>
::v-deep .el-calendar-day {
	padding: 0;
}
.calendar-day {
	width: 100%;
	height: 100%;
	padding: 8px;
}
.work-day {
	background-color: #fef0f0;
}
.is-selected .work-day,
.work-day:hover {
	background-color: var(--el-calendar-selected-bg-color);
}
.contentd {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
  text-align: center;
}
</style>
